<template>
  <!-- 导航栏 -->
  <van-nav-bar
    title="帐号认证"
    left-text="返回"
    left-arrow
    @click-left="back"
  />

  <div role="alert" class="van-notice-bar" style="padding:10px;">
    <i class=" van-badge__wrapper  van-icon van-icon-warning  van-notice-bar__left-icon"></i>
    <div role="marquee" class="van-notice-bar__wrap">
      <div class="van-notice-bar__content" style="transition-duration: 0s;white-space:pre-wrap;padding:3px 0px;">
        公告：验证码区别大小，请去注册邮箱查看邮件，获取验证码，！！！
      </div>
    </div>
  </div>

  <van-field
    v-model="code"
    clearable
    maxlength="4"
    label="验证码"
    placeholder="请输入验证码"
  >
    <template #button>
      <van-button v-if="showCountdown" ref="smsCode" size="mini"
        ><van-count-down
          :time="time"
          style="color: #777"
          @finish="countDownFinish"
          format="ss 秒后重试"
      /></van-button>
      <van-button v-else @click="getSmsCode" type="primary" size="mini"
        >重新获取验证码</van-button
      >
    </template>
  </van-field>
  <div style="padding: 10px 15px">
    <van-button type="primary" block @click="ChangeCode">确定</van-button>
  </div>
</template>
<script>
export default {
  emits: ["toggle"],
  created() {
    this.$emit("toggle", false);
  },
  data() {
    return {
      LoginUser: this.$cookies.get("LoginUser"),
      code: null, //手机号
      time: 60 * 1000, //倒计时的时间  毫秒级 60秒要*10000
      showCountdown: true,
    };
  },
  methods: {
    // 返回上一级
    back() {
      this.$router.push({
        path: "/user/base/index",
      });
    },
    countDownFinish() {
      this.showCountdown = false;
    },
    async getSmsCode() {
      this.showCountdown = true;
      let result = await this.$api.email({ userid: this.LoginUser.id });
      if (result.code == "1") {
        //提醒信息
        this.$notify({
          type: "success",
          message: result.msg,
          duration: 1000,
        });
      } else {
        //提醒信息
        this.$notify({
          message: result.msg,
          duration: 1000,
        });
      }
    },
    async ChangeCode() {
      if (this.code == "") {
        this.$notify({
          message: "验证码不能为空！！！",
          duration: 1000,
        });
        return false;
      } else {
        let result = await this.$api.emailcode({
          userid: this.LoginUser.id,
          code: this.code,
        });
        if (result.code == "1") {
          this.$cookies.set("LoginUser", result.data);
          console.log(this.$cookies.get("LoginUser"));

          //提醒信息
          this.$notify({
            type: "success",
            message: result.msg,
            duration: 1000,
            onClose: () => {
              this.$router.push("/user/base/index");
            },
          });
        } else {
          //提醒信息
          this.$notify({
            message: result.msg,
            duration: 1000,
          });
        }
      }
    },
  },
};
</script>